﻿@{
    ViewBag.Title = "BettleRun";
}
@model BugVisual.Controllers.DimaBugController.Model

<style type="text/css">

    body {
        text-align:center;
    }

    #menu {
        margin:20px auto;
        text-align:center;
        height:100px;

    }

    #GoBtn img , #StopBtn img,#ResetBtn img,#SaveBnt img{
        width:100px;
        height:50px;
    }

    #GoBtn:hover img{
        width:105px;
        height:55px;
        content:url("/Content/buttons/StartHover.png");   
    }
        
    #StopBtn:hover img{
        width:105px;
        height:55px;
        content:url("/Content/buttons/StopHover.png");        
    }

    #ResetBtn:hover img{
        width:105px;
        height:55px;
        content:url("/Content/buttons/resetHover.png");        
    }

    #SaveBnt:hover img{
        width:105px;
        height:55px;
        content:url("/Content/buttons/hoverSave.png");        
    }

    #mainCanvas {
        border:1px solid black;
    }

    .canvas-container {
        display:inline-block;
        margin:0px 10px;
    }

   
</style>

<div id="menu">
<h2>BettleRun</h2>
    <a id="GoBtn">
        <img src="/Content/buttons/start.png" />   
    </a>
    <a id="StopBtn">
        <img src="/Content/buttons/stop.png" />   
    </a>
    <a id="ResetBtn">
        <img src="/Content/buttons/reset.png" />   
    </a>
    <a id="SaveBnt">
        <img src="/Content/buttons/Save.png" />   
    </a>
</div>   
<canvas id="mainCanvas" width="600" height="600">Your Browser sooo bad !)</canvas>
<canvas id="myChart" width="600" height="600"></canvas>


<script type="text/javascript">

    var ctx = $("#myChart").get(0).getContext("2d");
    var myNewChart = new Chart(ctx);


    $(document).ready(function () {
      
        var NeedToStop = false;



        $('#GoBtn').live('click', function () {
            NeedToStop = false;
            var timer = setInterval(function () {

                if (NeedToStop) clearInterval(timer);


                jQuery.ajax({
                    url: "/DimaBug/NextIteration",
                    success: function (data) {
                        var legs = [];
                        for (var i = 0; i < data.legs.length; i++) {
                            legs.push(new Leg(data.legs[i].angle, data.legs[i].IsUp, data.legs[i].legId));
                        }
                        if (Math.abs(data.x - food.left) < 50 && Math.abs(data.y - food.top) < 50) {
                            NeedToStop = true;
                            alert("Ом-ном-ном!!!! Ом-ном-ном!!!! Ом-ном-ном!!!!");
                        }
                        MoveBug(data.x, data.y, data.angle, legs);
                    },
                    async: false
                });
                ResetGraf();

        },200);            
        });
        
        $('#StopBtn').click(function () {
            NeedToStop = true;
        });

        $('#ResetBtn').click(function () {
            $.get("/DimaBug/ResetPosition", null, function () {
                fieldMovedX = 0;
                fieldMovedY = 0;
            });
        });

        //var path = [];
        var fieldMovedX = 0;
        var fieldMovedY = 0;
        var canvas = new fabric.Canvas('mainCanvas');
        ///initialize
        
        var food = new fabric.Circle({
            radius: 10,
            fill: 'green',
            strokeWidth: 1.5,
            top: parseInt("@Model.food.y"),     
            left: parseInt("@Model.food.x")
        });
        
        canvas.add(food);
        food.on('modified', function () {
          var x=  food.getLeft();
          var y = food.getTop();
          //$.post("/DimaBug/NewTarget", { X: x, Y: y, IsFood: true }, function (data) {

          //});
           // alert("x=" + x + "  y=" + y);
        });
            
        var legs=[];
        legs.push(new Leg(0,false , 1));
        legs.push(new Leg(0, false, 2));
        legs.push(new Leg(0, false, 3));
        legs.push(new Leg(0, false, 4));
        legs.push(new Leg(0, false, 5));
        legs.push(new Leg(0, false, 6)); 
        var bug = new Bug(parseInt("@Model.bug.x"), parseInt("@Model.bug.y"), parseInt("@Model.bug.ViewAngle"), legs);
        var bugImg = bug.getBugImg();
        canvas.add(bugImg);  
        ///end init
      // MoveField(-75,-75);
        function Bug(x, y, angle, legs) {
            this.posX = x;
            this.posY = y;
            this.angle = angle;

            this.body =  new fabric.Circle({
                    radius: 6,
                    fill: 'black',
                    scaleX: 2.5,
                    top: y,      
                    left: x,
                });

            this.head =  new fabric.Circle({
                    radius: 3.5,
                    fill: 'black',
                    scaleY: 1.5,
                    top: y,
                    left: x- 15
                });
            

            this.legs = legs;

            this.legsLines = function () {
                var lines = [];
                for (var i = 0; i < legs.length; i++) {
                    var x1, y1, x2, y2;
                    switch (legs[i].legId) {
                        case 1:
                            {
                                x1 = x + 7;
                                y1 = y + 5;
                                x2 = x + 7;
                                y2 = y + 15
                            }
                            break
                        case 2:
                            {
                                x1 = x;
                                x2 = x;
                                y1 = y + 5;
                                y2 = y + 15;
                            }
                            break
                        case 3:
                            {
                                x1 = x - 7;
                                x2 = x - 7;
                                y1 = y + 5;
                                y2 = y + 15;
                            }
                            break
                        case 4:
                            {
                                x1 = x + 7;
                                x2 = x + 7;
                                y1 = y - 5;
                                y2 = y - 15;
                            }
                            break
                        case 5:
                            {
                                x1 = x;
                                x2 = x;
                                y1 = y - 5;
                                y2 = y - 15;
                            }
                            break
                        case 6:
                            {
                                x1 = x - 7;
                                x2 = x - 7;
                                y1 = y - 5;
                                y2 = y - 15;
                            }
                            break
                    }
                    if (legs[i].IsUp) {
                        lines.push(new fabric.Line([x1, y1, x2, y2], {
                            fill: 'black',
                            strokeWidth: 1,
                            selectable: false,
                            angle: legs[i].angle
                        }));
                    }
                    else {
                        var a=5;
                        if (legs[i].legId > 3)
                            a = -5;
                        else
                            a = 5;
                        var line1 = new fabric.Line([x1, y1, x1 - 2.5, y1 +a], {
                            fill: 'black',
                            strokeWidth: 1,
                            selectable: false
                        });
                        var line2 = new fabric.Line([x1 - 2.5, y1 + a, x2, y2], {
                            fill: 'black',
                            strokeWidth: 1,
                            selectable: false
                        });
                        lines.push(new fabric.Group([line1, line2], {
                            angle: legs[i].angle
                        }));
                    }
                }
                return lines;
            };

            this.getBugImg = function () {
                var objects = this.legsLines();
                objects.push(this.body);
                objects.push(this.head);
                return new fabric.Group(objects, {
                    selectable: false,
                    angle: 180-angle
                });
            }; 
        }
        function MoveBug(newX,newY,newAngle,newLegs) {
            newX+=fieldMovedX;
            newY += fieldMovedY;
           
            var changingX = 0, changingY = 0;
            canvas.remove(bugImg);
            var path = new fabric.Line([bug.posX, bug.posY, newX + changingX, newY + changingY], {
                fill: 'gray',
                strokeWidth: 1,
                selectable: false
            });
            bug = new Bug(newX, newY, newAngle, newLegs);
            bugImg = bug.getBugImg();
            canvas.add(bugImg);
            var a=false;
            if (newX > canvas.getWidth()) {
                a = true;
                changingX-= canvas.getWidth() / 2;
            }
            else if (newX < 0) {
                a = true; changingX += canvas.getWidth() / 2;
            }
            if (newY > canvas.getHeight())
            {
                a = true;
                changingY -= canvas.getHeight() / 2;
            }
            else if (newY < 0)
            {
                a = true;
                changingY += canvas.getHeight() / 2;
            }
            
            
            if (a)
                MoveField(changingX,changingY);
            
            canvas.add(path);
           //path.push(pathLoc);
          
        }
       
        function MoveField(x, y) {
            canvas.clear();
            fieldMovedX += x;
            fieldMovedY += y;
            //canvas.remove(bugImg);
            bug = new Bug(bug.posX + x, bug.posY + y, bug.angle, bug.legs);
            bugImg = bug.getBugImg();
            canvas.add(bugImg);
            xF = food.getLeft()+x;
            yF = food.getTop() + y;
            if (xF > canvas.getWidth()) xF = canvas.getWidth();
            if (xF < 0) xF = 0;
            if (yF > canvas.getHeight()) yF = canvas.getHeight();
            if (yF < 0) yF = 0;
            //canvas.remove(food);
            food = new fabric.Circle({
                radius: 10,
                fill: 'green',
                strokeWidth: 1.5,
                top: yF,
            left: xF
            });
            food = food;
            canvas.add(food);
        }
        function Leg(angle, IsUp, Id) 
        {
            this.angle = angle;
            this.IsUp = IsUp;
            this.legId = Id; //1,2,3,4,5,6 
        }


        function ResetGraf() {
            jQuery.ajax({
                url: "/DimaBug/GetErrors",
                success: function (data) {
                    var gdata = {
                        labels: data.labels,
                        datasets: [
                            {
                                fillColor: "rgba(151,187,205,0.5)",
                                strokeColor: "rgba(151,187,205,1)",
                                pointColor: "rgba(151,187,205,1)",
                                pointStrokeColor: "#fff",
                                data: data.data
                            }
                        ]
                    }

                    var options = {
                        animation: false,
                        pointDotRadius: 1,
                    }
                    myNewChart.Line(gdata, options);
                },
                async: false
            });
        }

        ResetGraf();

        });
</script>
